<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  
 
};
</script>

<style>
:root {
  --main-color: #99ccff; /*主题色*/
  --header-bg: #fbfbff; /*头部颜色*/
  --nav-bg: #fff; /*导航栏*/

  /* 文字颜色 */
  --text-primary: #303133; /*主要文字*/
  --text-common: #606266; /*普通文字*/
  --text-lesser: #909399; /*次要文字*/
  --text-special: #3399cc; /*特殊文字*/

  /* 文字大小 */
  --text-size1: 12px;
  --text-size2: 14px;
  --text-size3: 16px;
  --text-size4: 18px;
  --text-size5: 20px;
}

/* 弹性盒子 */
.flex-row {
  /* 一行 */
  display: flex;
  flex-direction: row;
}
.flex-col {
  /* 一列 */
  display: flex;
  flex-direction: column;
}

.justify-center {
  /* 子元素主轴居中对齐 */
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.justify-end{
  justify-content: flex-end;
}
.align-center {
  /* 子元素交叉轴居中对齐 */
  align-items: center;
}

.gap-r1 {
  row-gap: 2%;
}
.gap-r2 {
  row-gap: 4%;
}
.gap-r3 {
  row-gap: 6%;
}
.gap-c1 {
  column-gap: 2%;
}
.gap-c2 {
  column-gap: 4%;
}
.gap-c3 {
  column-gap: 6%;
}

.flex-grow{
  flex-grow: 1;
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100vh;
}
body,
#app {
  height: 100%;
  width: 100%;
}
</style>
